<template>
  <!-- 收货确认 -->
  <view class="content">
    <view
      class="top-view"
      style="background-color: #fff; padding: 25rpx">
      <view class="line-view">
        <uni-data-select
          :clear="false"
          v-model="menuType"
          :localdata="range"
          placeholder="选择单据类型"
          disabled></uni-data-select>
      </view>
      <view class="line-view">
        <uni-easyinput
          v-model="barCode"
          placeholder="请扫描来源单据"
          @confirm="getDetail"></uni-easyinput>
      </view>
      <view
        class="line-view"
        v-if="dataList && dataList.length > 0 && menuType == 0">
        <view class="line-text">供应商</view>
        <view class="line-value">{{ dataList[0].supName || '--' }}</view>
      </view>
    </view>

    <view
      style="
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: #fff;
        padding: 15rpx 25rpx;
      "
      v-if="barCode">
      <u-subsection
        :list="tabList"
        :current="0"
        active-color="#217EF8"
        mode="subsection"
        @change="tabChange"></u-subsection>
    </view>

    <view
      class="card-line"
      style="flex-direction: column"
      v-for="(item, index) of dataList"
      :key="index">
      <view class="line-view">
        <view class="line-text">物料代码</view>
        <view class="line-value">{{ item.productCode }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">物料名称</view>
        <view class="line-value">{{ item.productName }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">辅助单位</view>
        <view class="line-value">{{ item.auxUnitName }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">确认数量</view>
        <view class="line-value">{{ item.qualifiedQuantity }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">批号</view>
        <view class="line-value">{{ item.batch }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">默认仓位</view>
        <view class="line-value">{{ item.stockPositionName }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">应收数量</view>
        <view class="line-value">{{ item.qualifiedQuantityOld }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">确认数量</view>
        <view class="line-value">{{ item.qualifiedQuantity }}</view>
      </view>
      <view class="line-view">
        <view class="line-text">辅助数量</view>
        <view class="line-value">{{ item.auxQuality }}</view>
      </view>
			<view class="line-view">
			  <view class="line-text" style="font-size: 32rpx;">确认辅助数量</view>
			  <view class="line-value">{{ item.auxQualifiedQuantity }}</view>
			</view>
      <view class="line-view">
        <view
          class="line-but"
          @click="confirmCard(index)">
          确认
        </view>
      </view>
    </view>

    <view
      class="noData"
      v-if="dataList && dataList.length == 0">
      暂无数据
    </view>

    <view
      class="btn-view"
      v-if="dataList">
      <button
        type="primary"
        @click="submit">
        提 交
      </button>
      <!-- <button type="default">打印标签</button> -->
    </view>
    <div class="pagination-view">
      <uni-pagination
        :current="page"
        :total="totalElements"
        :show-icon="false"
        @change="pageChange"
        :pageSize="pageSize"
        style="width: 720rpx" />
    </div>
    <u-popup
      v-model="confirmPopShow"
      mode="top"
      border-radius="20">
      <view class="confirmPopView">
        <view class="popTop">
          <view
            v-if="
              dataList &&
              dataList.length > 0 &&
              dataList[confirmIndex].adjustParam
            ">
            <view class="popLine-view">
              <view class="popLine-text">物料类型</view>
              <view class="popLine-value">
                <uni-data-select
                  v-model="materialiForm.materialType"
                  :localdata="materialList"
                  :clear="false"
                  disabled
                  placeholder="选择物料类型"
                  @change="materialTypeChange"></uni-data-select>
              </view>
            </view>

            <view
              class="pop-param"
              v-if="materialiForm.materialType == '0'">
              <view class="popLine-view">
                <view class="popLine-text">长 (mm)</view>
                <view class="popLine-value">
                  <uni-easyinput
                    v-model="materialiForm.length"
                    type="number"></uni-easyinput>
                </view>
              </view>

              <view class="popLine-view">
                <view class="popLine-text">宽 (mm)</view>
                <view class="popLine-value">
                  <uni-easyinput
                    v-model="materialiForm.width"
                    type="number"></uni-easyinput>
                </view>
              </view>

              <view class="popLine-view">
                <view class="popLine-text">高 (mm)</view>
                <view class="popLine-value">
                  <uni-easyinput
                    v-model="materialiForm.height"
                    type="number"></uni-easyinput>
                </view>
              </view>

              <view class="popLine-view">
                <view class="popLine-text">密度 (kg/m³)</view>
                <view class="popLine-value">
                  <uni-easyinput
                    v-model="materialiForm.density"
                    type="number"></uni-easyinput>
                </view>
              </view>
            </view>

            <view
              class="pop-param"
              v-if="materialiForm.materialType == '1'">
              <view class="popLine-view">
                <view class="popLine-text">截面积 (mm²)</view>
                <view class="popLine-value">
                  <uni-easyinput
                    v-model="materialiForm.sectionalArea"
                    type="number"></uni-easyinput>
                </view>
              </view>

              <view class="popLine-view">
                <view class="popLine-text">高 (mm)</view>
                <view class="popLine-value">
                  <uni-easyinput
                    v-model="materialiForm.height"
                    type="number"></uni-easyinput>
                </view>
              </view>

              <view class="popLine-view">
                <view class="popLine-text">密度 (kg/m³)</view>
                <view class="popLine-value">
                  <uni-easyinput
                    v-model="materialiForm.density"
                    type="number"></uni-easyinput>
                </view>
              </view>
            </view>

            <view class="popLine-view">
              <view
                class="line-but"
                @click="compute(0)">
                计算
              </view>
            </view>
          </view>
          <view
            class="popLine-view"
            style="margin-bottom: 25rpx">
            <view class="popLine-text">数量</view>
            <view class="popLine-value">
              <uni-easyinput
                v-model="materialiForm.qualifiedQuantity"
                type="number"></uni-easyinput>
            </view>
          </view>

          <view
            class="popLine-view"
            style="margin-bottom: 25rpx"
            v-if="materialiForm.auxUnitId">
            <view class="popLine-text">辅助数量</view>
            <view class="popLine-value">
              <uni-easyinput
                v-model="materialiForm.auxQualifiedQuantity"
                type="number"></uni-easyinput>
            </view>
          </view>
        </view>
        <view class="popBottom">
          <view
            class="pop-btn closeBtn"
            @click="confirmPopShow = false">
            取 消
          </view>
          <view
            class="pop-btn confirmBtn"
            @click="compute(1)">
            确 认
          </view>
        </view>
      </view>
    </u-popup>
    <u-back-top
      :scroll-top="scrollTop"
      bottom="400"></u-back-top>
  </view>
</template>

<script>
var that;
export default {
  data() {
    return {
      page: 1,
      pageSize: 5,
      totalElements: 0,
      scrollTop: 0,
      tabIndex: 0,
      menuType: '120',
      tabList: [
        {
          name: '所有',
        },
        {
          name: '未填写',
        },
        {
          name: '已填写',
        },
      ],
      barCode: null,
      password: null,
      range: [],
      dataList: null,
      confirmPopShow: false,
      defForm: {
        materialType: '0',
        length: null,
        width: null,
        height: null,
        sectionalArea: null, //截面积
        density: null, //密度
        qualifiedQuantity: null,
        auxUnitId: null,
      },
      materialiForm: {},
      // materialType: '0', //0 板材  1  型材
      materialList: [
        {
          text: '板材',
          value: '0',
        },
        {
          text: '型材',
          value: '1',
        },
      ],
      confirmIndex: 0, //确认时index
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onShow() {},
  onLoad() {
    that = this;
    that.getList();
  },
  methods: {
    confirmCard(e) {
      // 生产退料 type 120 才会出现长 宽 高 截面积 密度
      that.confirmIndex = e;
      that.materialiForm = that.$u.deepClone(that.defForm);
      that.materialiForm.materialType =
        that.dataList[that.confirmIndex].adjustParam;
      if (that.dataList[that.confirmIndex].auxUnitId) {
        that.materialiForm.auxUnitId =
          that.dataList[that.confirmIndex].auxUnitId;
      }
      that.confirmPopShow = true;
    },
    compute(e) {
      // e 0 计算 1 确认
      const list = that.$u.deepClone(that.materialiForm);
      const param = that.$u.deepClone(that.dataList[that.confirmIndex]);
      if (param.adjustParam) {
        if (list.materialType == 0) {
          if (!list.length) {
            uni.showToast({
              icon: 'none',
              title: '请填写长度',
            });
            return false;
          }
          if (!list.width) {
            uni.showToast({
              icon: 'none',
              title: '请填写宽度',
            });
            return false;
          }
          if (!list.height) {
            uni.showToast({
              icon: 'none',
              title: '请填写高度',
            });
            return false;
          }
          if (!list.density) {
            uni.showToast({
              icon: 'none',
              title: '请填写密度',
            });
            return false;
          }
        }

        if (list.materialType == 1) {
          if (!list.sectionalArea) {
            uni.showToast({
              icon: 'none',
              title: '请填写截面积',
            });
            return false;
          }
          if (!list.height) {
            uni.showToast({
              icon: 'none',
              title: '请填写高度',
            });
            return false;
          }
          if (!list.density) {
            uni.showToast({
              icon: 'none',
              title: '请填写密度',
            });
            return false;
          }

          if (list.auxUnitId && !list.auxQualifiedQuantity) {
            uni.showToast({
              icon: 'none',
              title: '请填写辅助数量',
            });
            return false;
          }
        }
      }
      uni.showLoading({
        mask: true,
        title: '请稍后...',
      });

      if (e == 0) {
        // 计算
        this.$u
          .post('/wms/mobile/api/getProductionReturnCalWeight', list)
          .then((res) => {
            list.qualifiedQuantity = res.data;
            that.materialiForm = that.$u.deepClone(list);
          });
      }

      if (e == 1) {
        list.billType = param.billType;
        list.id = param.id;

        // 确认
        if (!list.qualifiedQuantity) {
          uni.showToast({
            icon: 'none',
            title: '请填写数量',
          });
          return false;
        }
        this.$u.post('/wms/mobile/api/confirmQty', list).then((res) => {
          that.confirmPopShow = false;
          that.getDetail();
        });
      }
    },
    tabChange(e) {
      that.tabIndex = e;
      // 0未 1中 2已
      that.page = 1;
      that.dataList = [];
      console.log(that.dataList);
      that.getDetail();
    },
    pageChange(e) {
      uni.showLoading({
        mask: true,
        title: '加载中...',
      });
      that.page = e.current;
      that.getDetail();
    },
    submit() {
      const arr = [
        {
          billNo: that.barCode,
          billType: that.menuType,
        },
      ];
      this.$u.post('/wms/mobile/api/batchConfirm', arr).then((res) => {
        that.dataList = [];
        that.barCode = null;
      });
    },
    checkThis(e) {
      var list = that.$u.deepClone(that.dataList);
      if (list[e].checked == 1) {
        list[e].checked = 0;
      } else {
        list[e].checked = 1;
      }
      that.dataList = list;
    },
    getDetail() {
      if (!that.menuType) {
        uni.showToast({
          icon: 'none',
          title: '请选择单据类型',
        });
        return false;
      }
      uni.showLoading({
        mask: true,
        title: '请求中...',
      });
      this.$u
        .get('/wms/mobile/api/queryByBillNoByPage', {
          billNo: that.barCode,
          billType: that.menuType,
          size: that.pageSize,
          page: that.page - 1,
          qtyType: that.tabIndex.toString(),
        })
        .then((res) => {
          that.totalElements = res.data.total;
          that.dataList = res.data.item;
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 0,
          });
        });
    },
    getList() {
      this.$u
        .post('/api/enum/name', {
          enumName: 'BillTypeDisplayEnum',
        })
        .then((res) => {
          const list = res.data;
          for (const item of list) {
            item.text = item.label;
          }

          that.range = list;
        });
    },
    materialTypeChange(e) {
      that.materialiForm = that.$u.deepClone(that.defForm);
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 25rpx 0 105rpx 0;
  background-color: #f8f8f8;
}

.line-but {
  margin-left: auto;
  width: 100rpx;
  padding: 8rpx 0;
  background-color: #007aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  border-radius: 10rpx;
}

.top-view {
  border-bottom: 2rpx solid #f8f8f8;
}

.card-line {
  background-color: #fff;
  padding: 15rpx 25rpx;
  margin: 35rpx auto;
  box-sizing: border-box;
  // overflow: hidden;
  // position: relative;
  width: 98%;
  border-radius: 15rpx;
  border: 2rpx solid #fff;
  margin-bottom: 25rpx;
}

.checkdiv {
  border: 2rpx solid #007aff;
}

.subscript {
  color: #fff;
  height: 60rpx;
  width: 190rpx;
  position: absolute;
  right: -30px;
  text-align: center;
  line-height: 30px;
  background-color: #007aff;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-view {
  position: fixed;
  bottom: 100rpx;
  display: flex;
  margin-top: 35rpx;
  width: 750rpx;

  button {
    width: 700rpx;
  }
}

.confirmPopView {
  // height: 750rpx;
  padding-top: 25rpx;

  .popTop {
    // height: 660rpx;

    .popLine-view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 25rpx;

      .popLine-text {
        width: 270rpx;
        font-size: 30rpx;
      }

      .popLine-value {
        width: 700rpx;
      }
    }

    .pop-param {
    }
  }

  .popBottom {
    height: 90rpx;
    display: flex;

    .pop-btn {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1rpx solid #ececec;
    }

    .confirmBtn {
      background-color: #007aff;
      color: #fff;
    }

    .closeBtn {
      color: #777;
    }
  }
}
</style>
